<template>
  <div class="financial-account" :id="idName">
    <account-toggle :title="'两融账户'" :parentId="idName" color1="RGBA(141,34,2,0.3)" color2="#FF5B2A" @toggleFunc="toggleFunc">
    </account-toggle>
    <div class="financial-account-over">
      <div class="one">
        <div class="item">
          <div class="item">维持担保比例</div>
          <div class="item">--%</div>
        </div>
        <div class="item">
          <div class="item">总负债/元</div>
          <div class="item">--%</div>
        </div>
      </div>
      <div class="two">
        <div class="item">
          <div class="item">总资产/元</div>
          <div class="item">--%</div>
        </div>
        <div class="item">
          <div class="item">可用保证金/元</div>
          <div class="item">--%</div>
        </div>
      </div>
    </div>
    <transition name="slide-fade">
      <financial-content v-show="isShow"></financial-content>
    </transition>
    <div class="bottom-blank" :class="{'account-close':!isShow}"></div>
  </div>
</template>

<script>
  import AccountToggle from 'components/selfaccount/AccountToggle'
  import FinancialContent from 'components/selfaccount/FinancialContent'

  export default {
    data () {
      return {
        isShow: false,
        idName:'financialAccount'
      }
    },
    props: {
      userCode: {
        type: String
      }
    },
    components: {
      'financial-content': FinancialContent,
      'account-toggle': AccountToggle
    },
    methods: {
      toggleFunc(isShow){
        this.isShow = isShow
      }
    }
  }
</script>

<style scoped>
  .slide-fade-enter-active,.slide-fade-leave-active{
    transition: all 0.3s ease;
  }
  .slide-fade-enter, .slide-fade-leave-active {
    transform: translate(0,-25%);
    opacity: 0;
  }
  .financial-account {
    position: relative;
  }

  .financial-account-over {
    z-index: 997;
    position: relative;
    width: 100%;
    height: 150px;
    background: #FF5B2A;
  }

  .financial-account-over > div {
    display: inline-block;
    float: left;
    width: 50%;
  }

  .financial-account-over > div > .item:nth-child(1) {
    margin: 15px 0;
  }

  .financial-account-over > div > .item > .item:nth-child(1) {
    color: #FFFFFF;
    font-size: 14px;
  }

  .financial-account-over > div > .item > .item:nth-child(2) {
    color: #FFFF9E;
    font-size: 22px;
  }

  .financial-account-over .one {
    padding-left: 5.33%;
  }

  .bottom-blank {
    width: 100%;
    height: 40px;
    background: #FF5B2A;
    z-index: 998;
    position: relative;
  }
  .account-close{
    margin-bottom: 4px;
  }
</style>
